<template>
  <div class="ebook-reader">
    <div id="read">
    </div>
  </div>
</template>

<script>
import Epub from 'epubjs'
import { ebookMixin } from '../../utils/mixin.js'
import { getFontFamily, getFontSize, getTheme } from '../../utils/localStorage'
global.ePub = Epub
export default {
  mixins: [ebookMixin],
  methods: {
    /**
     * 页面左滑动逻辑
     */
    prevPage () {
      if (this.rendition) {
        this.rendition.prev()
      }
      if (this.menuVisible) {
        this.showTitleAndMenu()
      }
    },
    /**
     * 页面右滑动逻辑
     */
    nextPage () {
      if (this.rendition) {
        this.rendition.next()
      }
      if (this.menuVisible) {
        this.showTitleAndMenu()
      }
    },
    /**
     * 显示/隐藏菜单栏逻辑
     */
    showTitleAndMenu () {
      // this.$store.dispatch('menuVisible', !this.menuVisible)
      this.setMenuVisible(!this.menuVisible)
      if (!this.menuVisible) {
        this.setSettingVisible(0)
      }
      this.setFontFamilyVisible(false)
    },
    /**
     * 初始化字体大小
     */
    initFontFamily () {
      const font = getFontFamily(this.fileName)
      if (!font) {
        this.rendition.themes.font('SimSun')
      } else {
        this.setDefaultFontFamily(font.name)
        this.rendition.themes.font(font.font)
      }
    },
    /**
     * 初始化字体
     */
    initFontSize () {
      const fontSize = getFontSize(this.fileName)
      const fontSizePx = window.innerWidth / 10
      const needFontSize = fontSizePx * fontSize
      if (!fontSize) {
        this.rendition.themes.fontSize(needFontSize)
      } else {
        this.setDefaultFontSize(fontSize)
        this.rendition.themes.fontSize(needFontSize)
      }
    },
    /**
     * 初始化主题
     */
    initTheme () {
      const theme = getTheme(this.fileName)
      this.themeList.forEach(theme => {
        this.rendition.themes.register(theme.name, theme.style)
      })
      if (!theme) {
        this.rendition.themes.select(this.defaultTheme)
      } else {
        this.setDefaultTheme(theme.name)
        this.rendition.themes.select(this.defaultTheme)
      }
    },
    /**
     * 初始化epub.js逻辑
     */
    initEpub () {
      const url = `${process.env.VUE_APP_RES_URL}/epub/${this.fileName}.epub`
      this.book = new Epub(url)
      this.setCurrentBook(this.book)
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight,
        // 微信的兼容性设置
        method: 'default'
      })
      // 渲染书
      this.rendition.display().then(() => {
        this.initTheme()
        this.initFontFamily()
        this.initFontSize()
        this.initGlobalStyle()
      }
      )
      this.rendition.on('touchstart', event => {
        this.touchStartX = event.changedTouches[0].clientX
        this.timeStampStart = event.timeStamp
      })
      this.rendition.on('touchend', event => {
        this.timeStampEnd = event.timeStamp
        const offsetX = event.changedTouches[0].clientX - this.touchStartX
        const time = event.timeStamp - this.timeStampStart
        if (time < 500 && offsetX > 40) {
          this.prevPage()
        } else if (time < 500 && offsetX < -40) {
          this.nextPage()
        } else {
          this.showTitleAndMenu()
        }
        if (event.cancelable) {
          event.preventDefault()
          event.stopPropagation()
        }
      })
      // 添加字体
      this.rendition.hooks.content.register(contents => {
        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/ZhangErKuiHei.css`)
        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/LaoShiHeiTi.css`)
        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/FangZhengXiJin.css`)
        contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/ZengBoWeiBei.css`)
      })
      // 设置默认字体为宋体
    }
  },
  mounted () {
    /**
     * 处理动态路由参数
     */
    const fileName = this.$route.params.fileName.split('|').join('/')
    this.setFileName(fileName).then(() => {
      this.initEpub()
    })
    // this.$store.dispatch('setFileName', fileName).then(() => {
    //   this.initEpub()
    // })
  }
}
</script>

<style>

</style>
